<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="90%"
      style="box-sizing: border-box; padding: 30px;"
    >
      <Divider orientation="center">基本信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>订单ID: {{ orderInfo.orderMall.mallOrderCode }}</div>
        </Col>
        <Col span="12">
          <div>核销单号: {{ orderInfo.voucher && orderInfo.voucher.code }}</div>
        </Col>
        <Col span="12">
          <div>
            手机号:
            {{
              orderInfo.voucher
                ? orderInfo.voucher.maskPhone
                : orderInfo.orderMall.takeMan
            }}
          </div>
        </Col>
        <Col span="12">
          <div>商品名称: {{ orderInfo.orderMall.goodsName }}</div>
        </Col>
        <Col span="12">
          <div>
            商品类型:
            {{ orderInfo.orderMall.serviceCode == 'xy' ? '洗衣' : '家政' }}
          </div>
        </Col>
        <Col span="12">
          <div>来源: {{ plantTypeText(orderInfo.orderMall.plantType) }}</div>
        </Col>
        <Col span="12">
          <div>
            下单时间:
            {{
              orderInfo.voucher
                ? orderInfo.voucher.createTime
                : orderInfo.orderMall.createTime
            }}
          </div>
        </Col>
        <Col span="12">
          <div>状态: {{ stateMap[orderInfo.orderMall.orderState] }}</div>
        </Col>
      </Row>
      <div
        style="width: 100%; display: flex; align-items: center;position: relative;"
      >
        <Divider orientation="center">
          联系信息
        </Divider>

        <Button
          type="primary"
          style="margin-left: 30px;position: absolute; right: 30px; "
          @click="copyHandle"
        >
          一键复制
        </Button>
      </div>
      <Row :gutter="16">
        <Col span="12">
          <div>联系人: {{ orderInfo.orderMall.takeMan }}</div>
        </Col>
        <Col span="12">
          <div>联系电话: {{ orderInfo.orderMall.takePhone }}</div>
        </Col>
        <Col span="12">
          <div>
            联系地址:{{ orderInfo.orderMall.takeProvince }}
            {{ orderInfo.orderMall.takeCity }}
            {{ orderInfo.orderMall.takeCounty }}
            {{ orderInfo.orderMall.takeAddress }}
          </div>
        </Col>
        <Col span="12">
          <div>预约时间: {{ orderInfo.orderMall.takePreTimeStart }}</div>
        </Col>
      </Row>
      <Divider orientation="center">订单状态</Divider>
      <Row :gutter="16">
        <Col span="24" style="margin-top: 10px;">
          <RadioGroup
            v-model="orderInfo.orderMall.orderState"
            :disabled="mode == 'view'"
          >
            <Radio :disabled="mode == 'view'" :label="3" border true-value="3">
              <span>已分单</span>
            </Radio>
            <Radio
              :disabled="mode == 'view'"
              :label="20"
              border
              true-value="20"
            >
              <span>已完成</span>
            </Radio>
          </RadioGroup>
        </Col>
        <Col span="12" style="margin-top: 10px;">
          <div style="display: flex;">
            <div style="width: 130px;">承接平台：</div>
            <Input
              :disabled="mode == 'view'"
              v-model="orderInfo.orderMall.servicePlatform"
              placeholder="承接平台"
              style="width: 250px;"
            ></Input>
          </div>
        </Col>

        <Col span="12" style="margin-top: 10px;">
          <div style="display: flex;">
            <div style="width: 130px;">订单编号：</div>
            <Input
              :disabled="mode == 'view'"
              v-model="orderInfo.orderMall.pickupCode"
              placeholder="订单编号"
              style="width: 250px;"
            ></Input>
          </div>
        </Col>
      </Row>
      <Divider orientation="center">
        运营备注
      </Divider>
      <Row>
        <Col span="24" style="margin-top: 10px;">
          <div style="display: flex;">
            <div style="width: 130px;">运营备注：</div>
            <Input
              :disabled="mode == 'view'"
              v-model="orderInfo.orderMall.operateRemark"
              type="textarea"
              placeholder="运营备注"
              :autosize="{ minRows: 4, maxRows: 15 }"
            />
          </div>
        </Col>
      </Row>

      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button
          @click="submit('formValidate')"
          type="primary"
          v-if="mode == 'edit'"
        >
          提交
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import moment from 'moment';
  import { platformList } from '@/constant/program';
  import { get } from 'lodash';

  export default {
    name: 'order-ope',
    data() {
      return {
        mode: 'view',
        platformList,
        stateMap: {
          '1': '待付款',
          '2': '已下单',
          '3': '已分配',
          '20': '已完成'
        },
        isShowModal: false,
        loadingBtn: false,
        orderInfo: {
          voucher: { state: '' },
          goods: { goodsImages: [''] },

          word: '',
          orderMall: { servicePlatform: '', pickupCode: '' }
        },
        title: '订单详情'
      };
    },
    computed: {
      plantTypeText() {
        return plantType => {
          const plantTypeItem = platformList.find(
            item => item.value == plantType
          );
          return get(plantTypeItem, 'label', '');
        };
      }
    },
    methods: {
      // 显示模态框
      show(mode, row) {
        this.mode = mode;
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      async submit() {
        // console.log('提交', this.orderInfo.orderMall);
        // if (this.orderInfo.orderMall.plantType == 3) {
        //   await this.axios.post('/orderMall/dyOrderDelivery', {
        //     orderId: this.orderInfo.orderMall.mallOrderId
        //   });
        // }
        const res = await this.axios.get('/orderMall/servicePlatform', {
          params: {
            orderCode: this.orderInfo.orderMall.mallOrderCode,
            pickupCode: this.orderInfo.orderMall.pickupCode,
            servicePlatform: this.orderInfo.orderMall.servicePlatform,
            state: this.orderInfo.orderMall.orderState,
            word: this.orderInfo.orderMall.operateRemark
          }
        });
        if (res.status == 200) {
          this.$Message.success('修改成功');
          this.$emit('loadData');
          this.hide();
        } else {
          this.$Message.error('修改失败');
        }
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .post('/orderMall/getOrderMallById', {
            mallOrderId: row.mallOrderId
          })
          .then(res => {
            console.log(res);
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.orderInfo = res.data;
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查看订单详情接口报错',
                duration: 0
              });
            }
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      copyHandle() {
        const {
          takeMan,
          takePhone,
          takeCounty,
          takeAddress,
          takeProvince,
          takeCity
        } = this.orderInfo.orderMall;

        const text = `联系人:${takeMan} 联系电话:${takePhone} 联系地址:${takeProvince} ${takeCity} ${takeCounty} ${takeAddress}`;
        navigator.clipboard
          .writeText(text)
          .then(() => {
            console.log('文本已复制');
            this.$Message.success(`${text} 已复制到剪切板`);
          })
          .catch(err => {
            this.$Message.error(`${text} 复制失败`);
          });
      }
    }
  };
</script>

<style scoped lang="less">
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
